@import "src/assets/css/comment.scss";

.footerMiddle-container{
    // background-color: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .musicControl{
        ul{
            display: flex;
            align-items: center;

            li{
                margin: 0 13px;

                img{
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
    
    .progress{
        margin-top: 10px;
        display: flex;
        align-items: center;

        .time{
            font-size: 10px;
            color:$time-color;
        }

        .progress2{
            position: relative;
            margin: 0 10px;
            width: 350px;
            height: 5px;
            border-radius: 10px;
            background-color: $progress-color;

            .progress3{
                position: absolute;
                background-color: $header-color;
                max-width: 98.5%;
                width: 0;
                height: 100%;
                left: 0;
                border-radius: 10px;

                .circle{
                    right: -13px;
                    top: -4px;
                    position: absolute;
                    width: 13px;
                    height: 13px;
                    border-radius: 50%;
                    background-color: $header-color;
                    cursor: pointer;
                }
            }
        }      
    }
}